<template>
  <u-popup
    v-model="showPopup"
    mode="bottom"
    safe-area-inset-bottom
    border-radius="22"
  >
    <view class="delivery-page">
      <!-- <view class="page-bg" @click="showPopup = false"></view> -->
      <view class="page-content">
        <view class="page-header">
          <view>{{ $t("order.distribution") }}</view>
          <image
            @click="showPopup = false"
            :src="asyncImgs.images.white_close_icon"
            alt=""
            mode="aspectFit"
          >
          </image>
        </view>
        <!-- 配送类型列表 -->
        <view class="delivery-section">
          <view
            class="delivery-item"
            :class="{ active: activeTypeIndex == index }"
            v-for="(item, index) in send_type"
            :key="index"
            @click="chooseItem(item, index)"
          >
            {{ transToWord(item) }}
          </view>
        </view>

        <!-- 门店自提列表 -->
        <scroll-view :scroll-y="true" style="height: 50vh">
          <view
            class="shop-list"
            v-show="delivery == 'shop' && send_type.indexOf('shop') != -1"
          >
            <view
              class="shop-list-item"
              v-for="(shopitem, index) in shopList"
              :key="index"
              @click="selectShop(item, index)"
            >
              <view class="shop-status">
                <image
                  v-if="activeShopIndex == index"
                  :src="asyncImgs.images.choosed_red_icon"
                  mode="aspectFit"
                ></image>
                <view v-else></view>
              </view>
              <view class="shop-info">
                <view class="shop-name-box">
                  <view class="shop-name">
                    <span>{{ shopitem.name }}</span>
                    <span class="nearby-box" v-if="index == 0">{{
                      $t("order.nearest")
                    }}</span>
                  </view>
                  <view>{{ shopitem.distance }}</view>
                </view>
                <view class="shop-address">{{ shopitem.address }}</view>
                <view class="shop-phone">{{ shopitem.mobile }}</view>
              </view>
            </view>
          </view>
          <view
            v-if="delivery == 'delivery' && send_type.indexOf('delivery') != -1"
          >
          </view>
        </scroll-view>

        <view class="page-footer">
          <view @click="handleConfirm">{{ $t("list.confirm") }}</view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false,
      activeTypeIndex: -1,
      activeShopIndex: 0,
      delivery: "",
      longitude: 0,
      latitude: 0,
      page: 1,
      shopList: []
    };
  },
  props: {
    // 配送列表
    send_type: {
      type: Array,
      default: function () {
        return [];
      }
    },
    // 当前选中配送方式
    current_type: {
      type: String,
      default: ""
    },
    location: {
      type: Object,
      default: function () {
        return {};
      }
    },
    goods_list: {
      type: Array,
      default: function () {
        return [];
      }
    },
    submitParams: {
      type: String,
      default: ""
    }
  },
  watch: {
    current_type: {
      handler: function (val) {
        this.delivery = val;
      },
      immediate: true
    },
    location: {
      handler: function (val) {
        if (val.longitude) {
          this.longitude = val.longitude;
          this.latitude = val.latitude;
        }
      },
      immediate: true
    }
  },
  computed: {
    transToWord() {
      return (val) => {
        if (!val) return null;
        if (val === "express") {
          return this.$t("order.express");
        }
        if (val === "shop") {
          return this.$t("order.store");
        }
        if (val === "delivery") {
          return this.$t("mdAdmin.distribution");
        }
      };
    }
  },
  created() {
    this.getShopList();
    this.watchCurrentType();
  },
  methods: {
    watchCurrentType() {
      if (!this.current_type || !this.send_type.length) return;
      this.send_type.some((d, index) => {
        if (d === this.current_type) {
          this.activeTypeIndex = index;
          return true;
        }
      });
    },
    // 展示弹框
    setShowPayPopup() {
      this.showPopup = !this.showPopup;
    },

    // 选择配送方式
    chooseItem(item, index) {
      if (item == "delivery") {
        let isDelivery = false;
        let cartList = [];
        for (let i = 0; i < this.goods_list.length; i++) {
          if (this.goods_list[i].delivery_type.indexOf("delivery") === -1) {
            isDelivery = true;
            cartList.push(this.goods_list[i].cart_id);
          }
        }
        if (isDelivery) {
          uni.showModal({
            title: this.$t("order.prompt"),
            content:
              "商品列表中存在不支持同城配送的商品，建议自动剔除，否则将无法下单",
            success: (res) => {
              if (res.confirm) {
                let submitParams = JSON.parse(this.submitParams);
                let newParams = [];
                for (let i = 0; i < submitParams.length; i++) {
                  let newItem = {
                    mch_id: submitParams[i].mch_id
                  };
                  let newItemGoods = [];
                  for (
                    let ii = 0;
                    ii < submitParams[i].goods_list.length;
                    ii++
                  ) {
                    if (
                      cartList.indexOf(
                        submitParams[i].goods_list[ii].cart_id
                      ) === -1
                    ) {
                      newItemGoods.push({
                        cart_id: submitParams[i].goods_list[ii].cart_id
                      });
                    }
                  }
                  newItem.goods_list = newItemGoods;
                  newParams.push(newItem);
                }
                this.$utils.toUrl(
                  "/order/order-submit/order-submit?is_delivery=1&submit=" +
                    JSON.stringify(newParams),
                  "redirectTo"
                );
              }
            }
          });
        } else {
          this.activeTypeIndex = index;
          this.delivery = item;
        }
      } else {
        this.activeTypeIndex = index;
        this.delivery = item;
      }
    },

    // 获取定位
    async getLocation() {
      const res = await this.$store.dispatch("getLocation");
      if (res) {
        let { longitude, latitude } = res;
        this.longitude = longitude;
        this.latitude = latitude;
      }
      this.getShopList();
    },

    // 获取附近门店列表
    getShopList() {
      let query = {
        page: this.page,
        longitude: this.longitude,
        latitude: this.latitude
      };
      //  this.$allrequest.shop.nearby(query)
      this.$allrequest.shop.getMdList(query).then((res) => {
        if (res.code == 0) {
          if (res.data.list.length < 10) {
            this.is_load = false;
          }
          let stroageMd = uni.getStorageSync("storeMdData");
          if (stroageMd) {
            stroageMd = JSON.parse(stroageMd);
            if (stroageMd?.id) {
              this.shopList = [stroageMd];
            }
          } else {
            this.shopList = this.shopList.concat(res.data.list);
            this.page++;
          }
        }
      });
    },

    // 选择门店
    selectShop(item, index) {
      this.activeShopIndex = index;
    },

    // 点击确认按钮
    handleConfirm() {
      if (
        this.send_type[this.activeTypeIndex] == "shop" &&
        this.activeShopIndex < 0
      )
        return;
      let type = this.send_type[this.activeTypeIndex];
      let shop = type === "shop" ? this.shopList[this.activeShopIndex] : {};
      if (this.activeShopIndex >= 0 && type == "shop") {
        uni.setStorageSync(
          "order_select_shop",
          JSON.stringify(this.shopList[this.activeShopIndex])
        );
      }
      this.$emit("selectShopCb", {
        type,
        shop
      });
      this.showPopup = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.delivery-page {
  // width: 100%;
  // min-height: 100vh;
  // position: fixed;
  // left: 0;
  // top: 0;
  // z-index: 111;

  // .page-bg {
  // 	width: 100%;
  // 	min-height: 100vh;
  // 	background-color: #3d3d3d;
  // 	opacity: 0.75;
  // }

  .page-content {
    // width: 100%;
    // background: #ffffff;
    // border-radius: 22rpx 22rpx 0 0;
    padding-top: 30rpx;
    // position: absolute;
    // bottom: 0;

    .page-header {
      width: 100%;
      height: 98rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      view {
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #262626;
        display: flex;
        align-items: baseline;
      }

      image {
        width: 40rpx;
        height: 40rpx;
        position: absolute;
        right: 36rpx;
        top: 29rpx;
        z-index: 11;
      }
    }

    .delivery-section {
      margin-left: 36rpx;
      display: flex;
      align-items: center;
      padding: 24rpx 0;
      border-bottom: 1rpx solid #f2f2f2;

      .delivery-item {
        width: 162rpx;
        height: 60rpx;
        background: #f2f2f2;
        border-radius: 30rpx;
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #bfbfbf;
        text-align: center;
        line-height: 60rpx;
        margin-right: 24rpx;
      }

      .active {
        background: #fcedeb;
        border: 2rpx solid #f7271f;
        color: #f7271f;
      }
    }

    .shop-list {
      margin-left: 36rpx;

      .shop-list-item {
        display: flex;
        align-items: center;
        border-bottom: 1rpx solid #f2f2f2;
        padding: 24rpx 0;

        .shop-status {
          margin-right: 22rpx;

          view {
            width: 32rpx;
            height: 32rpx;
            background: #ffffff;
            border: 3rpx solid #8c8c8c;
            border-radius: 16rpx;
          }

          image {
            width: 32rpx;
            height: 32rpx;
          }
        }

        .shop-info {
          flex: 1;
          padding-right: 36rpx;

          .shop-name-box {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .shop-name {
              display: flex;
              align-items: center;
              font-size: 26rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #262626;
              line-height: 44rpx;
              max-width: 500rpx;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;

              .nearby-box {
                width: 90rpx;
                height: 26rpx;
                background: #ffffff;
                border: 1rpx solid #f7271f;
                border-radius: 4rpx;
                font-size: 20rpx;
                font-weight: 400;
                color: #f7271f;
                text-align: center;
                line-height: 26rpx;
                margin-left: 18rpx;
              }
            }
          }

          .shop-address,
          .shop-phone {
            font-size: 22rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #8c8c8c;
            line-height: 44rpx;
          }

          .shop-address {
            margin: 16rpx 0 8rpx 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }

    .page-footer {
      width: 100%;
      height: 99rpx;
      background: #ffffff;
      box-shadow: 0 1rpx 0 0 #f2f2f2;
      display: flex;
      justify-content: center;
      align-items: center;

      view {
        width: 678rpx;
        height: 76rpx;
        background: linear-gradient(90deg, #ff4e18, #f32524);
        border-radius: 38rpx;
        text-align: center;
        line-height: 76rpx;
        font-size: 30rpx;
        font-family: PingFang;
        font-weight: bold;
        color: #ffffff;
      }
    }
  }
}
</style>
